<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小球跟随</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .circle {
        width: 100px;
        height: 100px;
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <div class="circle"></div>

    <script>
      //   let circle = document.querySelector('.circle');
      //   window.addEventListener('mousemove', function (e) {
      //     console.log(`X：${e.pageX}px`);
      //     console.log(`Y：${e.pageY}px`);
      //     circle.style = `transform: translate(${e.pageX - 50}px,${e.pageY - 50}px)`;
      //   });

      let circle = document.querySelector('.circle');

      let start_x, move_x, end_x, change_x;
      let start_y, move_y, end_y, change_y;

      circle.addEventListener('touchstart', function (e) {
        change_x = e.touches[0].pageX - e.target.offsetLeft;
        change_y = e.touches[0].pageY - e.target.offsetTop;
      
      });

      circle.addEventListener('touchmove', function (e) {
        move_x = e.touches[0].pageX;
        move_y = e.touches[0].pageY;
   

        circle.style = `transform: translate(${move_x - change_x}px,${move_y - change_y}px)`;
      });

      // let circle = document.querySelector('.circle');
      // let startX = 0;
      // let startY = 0;
      // let moveX = 0;
      // let moveY = 0;
      // let endX = 0;
      // let endY = 0;

      // // 记录触摸球的开始坐标
      // circle.addEventListener('touchstart', function (e) {
      //   startX = e.touches[0].pageX;
      //   startY = e.touches[0].pageY;
      // });

      // // 球移动
      // circle.addEventListener('touchmove', function (e) {
      //   // 位移的值：当前小球停留的坐标+手指移动的坐标-小球刚开始移动的坐标
      //   moveX = endX + e.touches[0].pageX - startX;
      //   moveY = endY + e.touches[0].pageY - startY;
      //   this.style.transform = `translate(${moveX}px,${moveY}px)`;
      // });

      // // 球停止移动的时候需要记录当前移动的位置
      // circle.addEventListener('touchend', function (e) {
      //   // 保留移动之后结束的坐标
      //   endX = moveX;
      //   endY = moveY;
      // });
    </script>
  </body>
</html>
